<template>
  <el-dialog v-model="dialogVisible" title="查询列表" :before-close="handleClose" width="90%">
    <div style="font-weight: bold;font-size: 16px">共{{pageTotal}}条</div>
    <div>
      <el-table :data="tableData.data" tooltip-effect="dark" :row-class-name="tableRowClassName" max-height="550" highlight-selection-row>
        <el-table-column type="index" />
        <el-table-column prop="userId" label="用户" fixed="left" width="100"></el-table-column>
        <el-table-column v-for="item in tableHeader" :prop="'value.'+item.fieldName" :label="item.notes" :width="item.width" show-overflow-tooltip>
          <template #default="scope" v-if="item.fieldName === 'carLicence' || item.fieldName === 'carLicensef'">
            <img v-lazy="scope.row.value[item.fieldName]" v-show="scope.row.value[item.fieldName]" style="width: 30px;height: 30px" :src="scope.row.value[item.fieldName]" alt="#">
          </template>
        </el-table-column>
        <el-table-column prop="state" label="证件状态" fixed="right" width="100">
          <template #default="scope">{{checkStatusFormattingState(scope.row.state)}}</template>
        </el-table-column>
        <el-table-column prop="oneLevelState" label="一级状态" width="100">
          <template #default="scope">{{checkStatusFormatting(scope.row.oneLevelState)}}</template>
        </el-table-column>
        <el-table-column prop="twoLevelState" label="二级状态" width="100">
          <template #default="scope">{{checkStatusFormatting(scope.row.twoLevelState)}}</template>
        </el-table-column>
        <el-table-column prop="threeLevel" label="三级状态" width="100">
          <template #default="scope">{{checkStatusFormatting(scope.row.threeLevel)}}</template>
        </el-table-column>
        <el-table-column prop="remark" label="拒绝理由" width="100">
        </el-table-column>
        <el-table-column prop="uuId" label="批次号" width="100" show-overflow-tooltip>
          <template #default="scope">{{scope.row.uuId}}</template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :page-size="60" :total="pageTotal" @current-change="currentChange"/>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref,reactive } from 'vue'
import {ElLoading, ElMessage} from "element-plus";
import {_searchAllList} from "../http/api.js";
import {checkStatusFormatting, checkStatusFormattingState} from "../utils/index.js";

const props = defineProps({
  searchValue:String,
  keyword:String,
  loginId:String
})

const $emit = defineEmits(['handleCloseAll']);
// 高亮
const tableRowClassName = ({row}) => {
  if(row.repeatState && row.repeatState === '1') {
    return 'warning-row-it-style'
  }
}
const dialogVisible = ref(true);
const tableHeader = [
  {
    "id": "1779837461469589506",
    "fieldName": "carnum",
    "width": "120",
    "notes": "车牌号码",
  },
  {
    "id": "1779837461477978113",
    "fieldName": "carType",
    "width": "80",
    "notes": "车辆类型",
  },
  {
    "id": "17798374614779781141",
    "fieldName": "certId",
    "width": "120",
    "notes": "一级证件类型",
  },
  {
    "id": "17798374614779781142",
    "fieldName": "cnName",
    "width": "120",
    "notes": "二级证件类型",
  },
  {
    "id": "1779837461482172418",
    "fieldName": "carName",
    "width": "120",
    "notes": "车辆联系人",
  },
  {
    "id": "1779837461482172419",
    "fieldName": "carPhone",
    "width": "120",
    "notes": "车辆联系电话",
  },
  {
    "id": "1779837461482172420",
    "fieldName": "carCompany",
    "width": "120",
    "notes": "使用单位",
  },
  {
    "id": "1779837461486366721",
    "fieldName": "datePickersStart",
    "width": "120",
    "notes": "车证使用开始日期",
  },
  {
    "id": "1779837461486366722",
    "fieldName": "datePickersEnd",
    "width": "120",
    "notes": "车证使用结束日期",
  },
  {
    "id": "1779837461486366723",
    "fieldName": "times",
    "width": "120",
    "notes": "车证使用时间段",
  },
  {
    "id": "1779837461490561026",
    "fieldName": "remark",
    "width": "120",
    "notes": "备注",
  },
  {
    "id": "1779837461490561027",
    "fieldName": "carArea",
    "width": "120",
    "notes": "停车区域",
  },
  {
    "id": "1779837461490561028",
    "fieldName": "carLicence",
    "width": "120",
    "notes": "行驶证正证正面照片",
  },
  {
    "id": "1779837461490561029",
    "fieldName": "carLicensef",
    "width": "120",
    "notes": "行驶证正证背面照片",
  }
]
const tableData = reactive({
  data:[]
})
const pageIndex = ref(1);
const pageTotal = ref(); // 总数
const searchData = () => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  let check = {};
  check[props.searchValue] = props.keyword||'';
  let params = {
    current: pageIndex.value,
    size:60,
    userId: props.loginId,
  }
  _searchAllList({ ... params, ... check })
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let item = res.data.data;
          pageTotal.value = item.total;
          let records = res.data.data.records;
          tableData.data = records;
        }else {
          ElMessage({message: res.data.msg, type: 'warning' });
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
      })
}
searchData()
const handleClose = () => {
  $emit('handleCloseAll')
}

// 分页
const currentChange = (index) => {
  pageIndex.value = index;
  searchData()
}
</script>

<style scoped lang="scss">

</style>